import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Row, Col, Select } from 'antd';
import { useAntdTable } from '@umijs/hooks';
import SlickTable from '@/components/SlickTable';
import NumManageForm from './NumManageForm';
import request from '@/utils/request';

const { Option } = Select;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function NumManage({ visiable, close, form }) {
  const { getFieldDecorator } = form;

  const [selectedRows, setSelectedRows] = useState([]);

  const handleSelectRows = value => {
    setSelectedRows(value);
  };

  const columns = [
    {
      title: '员工账号',
      dataIndex: 'orderId',
      ellipsis: true,
    },
    {
      title: '员工名称',
      dataIndex: 'exceptionCode',
      ellipsis: true,
    },
    {
      title: '分配权重',
      dataIndex: 'exceptionModelName',
      ellipsis: true,
    },
    {
      title: '保有量',
      dataIndex: 'lanName',
      ellipsis: true,
    },
    {
      title: '已分配订单数',
      dataIndex: 'exceptionStatus',
      ellipsis: true,
    },
    {
      title: '是否班长',
      dataIndex: 'orderStatus',
      ellipsis: true,
    },
    {
      title: '状态',
      dataIndex: 'createDate',
      ellipsis: true,
    },
  ];

  return (
    <Modal
      title="工号管理列表"
      width="950px"
      destroyOnClose
      footer={
        <>
          <Button type="primary" ghost onClick={close}>
            新增工号
          </Button>
          <Button type="danger" ghost onClick={close}>
            删除工号
          </Button>
          <Button type="primary" onClick={close}>
            保存
          </Button>
          <Button type="default" onClick={close}>
            关闭
          </Button>
        </>
      }
      onCancel={close}
      visible={visiable}
    >
      <Form className="padding-bottom" {...formItemLayout}>
        <Row gutter={16}>
          <Col span={8}>
            <Form.Item label="员工账号">
              {getFieldDecorator('systemSource', {
                // initialValue: '11',
              })(<Input allowClear placeholder="请输入" />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="员工名称">
              {getFieldDecorator('queryType', {
                // initialValue: '11',
              })(<Input allowClear placeholder="请输入" />)}
            </Form.Item>
          </Col>
          <Col span={8}>
            <Row>
              <Col span={18}>
                <Form.Item label="状态">
                  {getFieldDecorator('exceptionCode')(
                    <Select placeholder="请选择">
                      <Option value="1000">启用</Option>
                      <Option value="1100">停用</Option>
                    </Select>
                  )}
                </Form.Item>
              </Col>
              <Col span={6} className="text-right">
                <Button type="primary">查询</Button>
              </Col>
            </Row>
          </Col>
        </Row>
      </Form>
      <SlickTable
        style={{ marginTop: 8 }}
        rowKey={record => record.id}
        columns={columns}
        // {...restTableProps}
        // data={{
        //   pagination: {
        //     ...pagination,
        //     pageSize: size,
        //   },
        // }}
        pick="checkbox"
        extra={selectedRows.length > 0 ? <Button type="primary">批量处理</Button> : null}
        onSelectRow={handleSelectRows}
        selectedRows={selectedRows}
      />
      <NumManageForm />
    </Modal>
  );
}

export default Form.create()(NumManage);
